<template>
  <div class="exam-page">
    <section class="empty0-section">
      <div class="tal-c report_header">
            <img src="../../assets/home/logo_none.png" alt="">
            <p class="report_title color-white">英语水平专业测评报告</p>
        </div>
        <div class="report_content tal-c color-white">
            <span class="school">学   校：{{userInfo.school}}</span>
            <span class="grade">年   级：{{userInfo.grade}}</span>
            <span>电   话：{{userInfo.mobile}}</span>
        </div>
        <div class="tal-c report_score color-white">
            <p class="report_score_1"><b>{{userInfo.username}}</b>同学你的词汇量约为</p>
            <p class="report_score_1 report_score_2"><b class="score">{{exam_score}}</b>  词</p>
            <p class="report_score_1">相当于 {{advises_ability}}</p>
        </div>
        <div class="report_echarts tal-c">
            <div class="ui-grid-a">
                <div class="ui-block-a">
                    <p class="color-white">{{advises_ability}}阶段总词汇量：<span>{{data_score}}</span>词</p>
                    <img src="../../assets/home/englishlevel.png" alt="">
                    <p class="form_title">各年级英语水平划分表</p>
                </div>
                <div class="ui-block-b">
                    <p class="color-white">实际掌握词汇量：{{exam_score}}词</p>
                    <div id="chart_img" ></div>
                    <p class="form_title">测评结果柱状比对图</p>
                </div>
            </div>
        </div>
        <div class="cepingjieguo jieguo">
            <p class="cpjg_title1"><span>1</span><b>测评结果</b></p>
            <p class="cpjg_content">{{advise}}</p>
        </div>

        <div class="cepingjieguo">
            <p class="cpjg_title"><span>1</span><b>学习建议</b></p>
            <p class="cpjg_content">{{advise_grade}}</p>
        </div>
        <div class="examdate">测评时间：<span>{{exam_date}}</span></div>
    </section>
  </div>
</template>
<script>
  import Footer from "@/components/layout/Footer";
  import { mapState } from "vuex";
  import { getReport } from "@/services";
  const qs = require("querystring");
  const echarts = require('echarts');
  export default {
    name: "exam",
    components: {
      Footer
    },
    data() {
      return {
        data_score:0,
        advises_ability:'',
        advise:'',
        advise_grade:'',
        id:'',
        score:0,
        exam_level:'',
        exam_score:0,
        exam_date:0,
        endaudioUrl: 'https://yxpmaterial.yixuepai100.com/exam/end.mp3', // 声音源
      };
    },
    computed: {
      ...mapState({
        userInfo: state => state.userInfo
      })
    },
    watch: {},
    methods: {
      //
      async getReport(){
        this.$loading.show()
        let params = {
         id:this.id,
         score:this.score
        }
        let data = await getReport(params)
         this.$loading.hide();
         if (data.code === 1) {
          console.log(data.data);
          this.advises_ability = data.data.ability;
          this.data_score = Number(data.data.section);
          this.advise = data.data.advise;
          this.advise_grade = data.data.advise_grade;
          this.exam_score = data.data.exam_socre;
          this.exam_level = data.data.exam_level;
          this.exam_date = data.data.exam_date;
          this.drawLine()
         }else{
          this.$Toast(data.info);
         }
      },
      drawLine(){
        // 基于准备好的dom，初始化echarts实例
        this.$echarts = echarts
        let myChart = this.$echarts.init(document.getElementById('chart_img'))
        // 绘制图表
        var data_score1 = [this.exam_score];
        var data_score2 = [this.data_score];
        var option = {
            color: ['#2ecc71', '#00AFF0'],
            xAxis: {
                type: 'category',
                data: ['', '']
            },
            yAxis: {
                type: 'value'
            },
            animation: false,
            legend: {
                type: 'scroll',
                orient: 'vertical',
                right: 0,
                top: 0,
                data:[this.advises_ability+'总词汇量','实际掌握词汇量']
            },
            series: [{
                name: '实际掌握词汇量',
                data: data_score1,
                type: 'bar',
                barWidth:20,
                label: {
                    normal: {
                        show: true,
                        position: 'top'
                    }
                },
                itemStyle: {
                    normal: {
                        barBorderRadius: 5,
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: '#2ecc71'},
                                {offset: 1, color: '#2ecc71'}
                            ]
                        ),
                        shadowColor: 'rgba(0, 0, 0, 0.5)',
                        shadowBlur: 10
                    }
                },
            },{
                name: this.advises_ability+'总词汇量',
                data: data_score2,
                type: 'bar',
                barWidth:20,
                label: {
                    normal: {
                        show: true,
                        position: 'top'
                    }
                },
                itemStyle: {
                    normal: {
                        barBorderRadius: 5,
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: '#00AFF0'},
                                {offset: 1, color: '#00AFF0'}
                            ]
                        ),
                        shadowColor: 'rgba(0, 0, 0, 0.5)',
                        shadowBlur: 10
                    }
                },
            }]
        };
        myChart.setOption(option);
      }
    },
    created() {
      this.id = this.$route.query.id;
      this.score = this.$route.query.score;
      this.getReport();
    },
    mounted() {
      this.drawLine();
    },
    beforeCreate() {},
    beforeMount() {},
    beforeUpdate() {},
    updated() {},
    beforeDestroy() {}
  };
  </script>
<style lang="less" scoped>
/* @import url(); 引入公共css类 */
.exam-page{
  min-height: calc(100vh - 70px);
  height: 1340px;
  width: 100%;
  padding-top: 30px;
  background:#ffffff url(../../assets/yxp-bg.png) center / 100% 100% no-repeat;
  .color-white{
    color: #ffffff;
  }
  .empty0-section{
    margin: 0 auto;
    text-align: center;
    width: 50%;
    height: 980px;
    min-height: calc(100vh - 70px);
    margin-left: 25%;
    background: url(../../assets/room/bg1200px.png) repeat-y;
    .report_header{
      padding-top: 20px;
      img{
        width: 10rem;
      }
      .report_title{
        font-size: 2rem;
        font-weight: 400;
      }
    }
    .report_content{
        padding-top: .6rem;
        font-size: 1rem;
        font-weight: 200;
        clear: both;
        .school,.grade{
          margin-right: 2rem;
        }
    }
    .report_score{
      margin-top: 1.2rem;
      .report_score_1{
          font-size: 1rem;
          b{
            font-size: 1.5rem;
            margin-right: .5rem;
          }
      }
      .report_score_2 .score{
          font-size: 2.5rem;
          color: #FFFF00;
          margin-right: .5rem;
      }
    }
    .report_echarts {
      .ui-grid-a{
        padding: 4%;
      }
      p{
      font-size: 1rem;
      font-weight: 200;
      }
      .ui-block-a,.ui-block-b{
        float: left;
        width: 50%;
        img{
          width:18.5rem;
          height:15rem;
        }
      }
      #chart_img{
        width:18.5rem;
        height:15rem;
      }
    }
    .jieguo{
      padding-top: 2.2rem;
    }
    .cepingjieguo{
      margin-top: 2.2rem;
      width: 100%;
      clear: both;
      .cpjg_title{
        font-size: 1.5rem;
        font-weight: 200;
        span{
          margin-right: 20px;
          font-size: 40px;
          color: #27ae60;
          background-color: #27ae60;
        }
      }
      .cpjg_title1{
        font-size: 1.5rem;
        font-weight: 200;
        height: 2rem;
        span{
          margin-right: 20px;
          font-size: 40px;
          color: #0063B2;
          background-color: #0063B2;
        }
      }
      .cpjg_content{
          line-height: 2rem;
          margin-top: 1.2rem;
          text-align: left;
          text-indent: 2rem;
      }
    }
    .examdate{
      float: right;
      margin-top: 2.2rem;
    }
  }
 }
</style>
